import { Layout, Menu, Select } from 'antd'
import { NavLink, getLocale, useIntl, setLocale } from 'umi';
import { useState } from 'react';
import "../utils/font_1hsfvuvglv9/iconfont.css"
import styles from './layouts.less';
import Theme from "../components/Theme"
let { Header, Footer, Content } = Layout;
const LayoutPage: React.FC = (props, location) => {
    let intl = useIntl();


    function changeValue(value: string) {
        setLocale(value, false)
    }

    return <div className={styles.wrap}>
        <Header className={styles.header}>
            {
                console.log('layouts...', location.path)
            }
            <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="" />

            {/* 导航栏 */}
            <NavLink to='/page/article' className={styles.link}>{intl.formatMessage({
                id: 'header.article',
            })}</NavLink>
                <NavLink to='/page/archives' className={styles.link}>{intl.formatMessage({
                id: 'header.archives',
            })}</NavLink>
            <NavLink to='/page/knowledge' className={styles.link}>{intl.formatMessage({
                id: 'header.knowledge',
            })}</NavLink>
            <NavLink to='/page/msgboard' className={styles.link}>{intl.formatMessage({
                id: 'header.msgboard',
            })}</NavLink>
            <NavLink to='/page/about' className={styles.link}>{intl.formatMessage({
                id: 'header.about',
            })}</NavLink>

            <div className={styles.ZE}>

                <div className={styles.ZE_Select}>
                    <div onClick={() => {
                        changeValue('zh-CN')
                    }}>
                        中文
                    </div>

                    <div onClick={() => {
                        changeValue('en-US')
                    }}>
                        English
                    </div>
                </div>
            </div>
            <Theme/>
        </Header>

        <Content className={styles.content}>{props.children}</Content>

        <Footer className={styles.Footer}>
            底部
        </Footer>
    </div>

}

export default LayoutPage